﻿<!DOCTYPE HTML>
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>五星好评插件</title>
  <style>
	*{margin:0;padding:0;font-size:13px;}
	 ul,li{list-style:none;}
	 .star {position:relative;width:600px;height:24px; margin:20px auto 0;}
	 .star span {float:left;height:19px;line-height:19px;}
	 .star ul{margin:0 10px;}
	 .star li{float:left;width:24px;height:22px;text-indent:-9999px;background:url('star.png') no-repeat;cursor:pointer;}
	 .star li.on{background-position:0 -28px;}
	 .star p {background:url('icon.gif') no-repeat;padding:10px 10px 0;position:absolute;top:20px;width:159px;height:60px;z-index:100;}
	 .star p em {color: #FF6600;display: block;font-style: normal;}
	 .star strong {color:#ff6600;padding-left:10px;}
	 .hidden{display:none;}
  </style>
 <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
  <script src="score.js"></script>
 </head>

 <body>
	<div class="star" id="score1">
		<span class="score-name">宝贝与描述相符</span>
		<ul>
			<li><a href="javascript:;">1</a></li>
			<li><a href="javascript:;">2</a></li>
			<li><a href="javascript:;">3</a></li>
			<li><a href="javascript:;">4</a></li>
			<li><a href="javascript:;">5</a></li>
		</ul>
	</div>
	<div class="star" id="score2">
		<span class="score-name">卖家的服务态度</span>
		<ul>
			<li><a href="javascript:;">1</a></li>
			<li><a href="javascript:;">2</a></li>
			<li><a href="javascript:;">3</a></li>
			<li><a href="javascript:;">4</a></li>
			<li><a href="javascript:;">5</a></li>
		</ul>
	</div>
	<div class="star" id="score3">
		<span class="score-name">卖家的发货速度</span>
		<ul>
			<li><a href="javascript:;">1</a></li>
			<li><a href="javascript:;">2</a></li>
			<li><a href="javascript:;">3</a></li>
			<li><a href="javascript:;">4</a></li>
			<li><a href="javascript:;">5</a></li>
		</ul>
	</div>
	<div class="star" id="score4">
		<span class="score-name">物流的运送速度</span>
		<ul>
			<li><a href="javascript:;">1</a></li>
			<li><a href="javascript:;">2</a></li>
			<li><a href="javascript:;">3</a></li>
			<li><a href="javascript:;">4</a></li>
		</ul>
	</div>
	<div class="star" id="score5">
		<span class="score-name">送货小哥的颜值</span>
		<ul>
			<li><a href="javascript:;">1</a></li>
			<li><a href="javascript:;">2</a></li>
			<li><a href="javascript:;">3</a></li>
			<li><a href="javascript:;">4</a></li>
			<li><a href="javascript:;">5</a></li>
			<li><a href="javascript:;">6</a></li>
		</ul>
	</div>
	<script>
		 $(function(){
			var score1 = new Score({
				selector:'#score1',
				callback: function(cfg) {
					console.log(cfg.scoreName+'-'+cfg.starAmount);
				}
			});
			var score2 = new Score({
				selector:'#score2',
				callback: function(cfg) {
					console.log(cfg.scoreName+'-'+cfg.starAmount);
				},
				aMsg : [
					"很不满意|很不满意",
					"不满意|不满意",
					"一般|一般",
					"满意|满意",
					"非常满意|非常满意"
				]
			});
			console.info(score1,score2);
			var score3 = new Score({
				selector:'#score3',
				callback: function(cfg) {
					console.log(cfg.scoreName+'-'+cfg.starAmount);
				}
			});
			var score4 = new Score({
				selector:'#score4',
				callback: function(cfg) {
					console.log(cfg.scoreName+'-'+cfg.starAmount);
				},
				aMsg : [
					"很不满意|满脸痘痘未消",
					"不满意|好黑",
					"一般|一般般",
					"满意|不错,脸不错"
				]
			});
			var score5 = new Score({
				selector:'#score5',
				callback: function(cfg) {
					console.log(cfg.scoreName+'-'+cfg.starAmount);
				},
				aMsg : [
					"很不满意|满脸痘痘未消",
					"不满意|好黑",
					"一般|一般般",
					"满意|不错,脸不错",
					"非常满意|大长腿欧巴",
					"High翻了|屌爆了"
				]
			});
		});
	</script>
 </body>
</html>
